<template>
  <div class="Sort">
    <div class="content">
      <div class="SearchBox">
        <search
        v-model="value"
        @on-blur="SubmitIt"
        position="absolute"
        top="0px"
        ref="search"></search>
      </div>
      <div class="left-nav">
        <tab
         :line-width="0"
         active-color="#234"
         v-model="index"
        >
          <tab-item
          :selected="sle === item"
          v-for="(item, index) in list"
          :key="index"
          @click="sle = item"
          >{{ item }}</tab-item>
        </tab>
      </div>
      <div class="right-content" v-model="index">
        <swiper
        v-model="index"
        :aspect-ratio="90/160"
        style="height:100%;backgroundColor:#298"
        :show-dots="false">
          <swiper-item v-for="(item, index) in list" :key="index">
            <div class="tab-swiper">{{item}} Container</div>
          </swiper-item>
        </swiper>
      </div>
    </div>
    <footer-com></footer-com>
  </div>
</template>

<script>
import FooterCom from '../components/footer'
import { Search, Tab, TabItem, Swiper, SwiperItem } from 'vux'

let list = () => ['分类一', '分类二', '分类三', '分类四', '分类五']
export default {
  components: {
    FooterCom,
    Search,
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  data() {
    return {
      value: "",
      results: [],
      index: 0,
      list: list(),
      sle: '分类一'
    }
  },
  methods: {
    SubmitIt(){
      console.log(this.value);
    }
  }
}
</script>

<style lang="css">
.Sort{
  width: 100%;
  height: 100%;
}
.SearchBox{
  height: 44px;
}
.content{
  height: calc(100% - 53px);
  overflow: hidden;
}
.left-nav{
  width: 20%;
  height: calc(100% - 44px);
  float: left;
  border-right: 1px solid #ccc;
}
.vux-tab{
  height: auto;
  display: block;
}
.vux-tab-wrap{
  height: auto;
}
.vux-tab-container{
  height: auto;
}
.select-item{
  background-color: #298;
}
.right-content{
  width: calc(80% - 1px);
  height: calc(100% - 44px);
  float: left;
}
</style>
